Component({
  properties: {
    url: {
      type: String,
      value: "",
    },
    count: {
      type: Number,
      value: 3,
    },
    width: {
      type: Number,
      value: 360,
    },
    height: {
      type: Number,
      value: 300,
    },
    duration: {
      type: Number,
      value: 0.3,
    },
    playNumber: {
      type: Number,
      value: "infinite",
    },
  },
  data: {
    currentTimeIndex: 1,
    currentAniLoopIndex: 0,
    bgImagePosX: 0,
    isPause: true,

    frameTimerGap: 100,

    isImageLoading: false,
  },
  attached() {
    // if (this.data.playNumber > 0) {
    //   setTimeout(() => {
    //     this.triggerEvent("end");
    //   }, this.data.playNumber * this.data.duration * 1000);
    // }

    // 计算每帧之间的间隔
    let tempGap = this.data.duration * 1000 / this.data.count;
    // console.log("attached  --- tempGap --- " + tempGap)
    this.setData({
      frameTimerGap: tempGap,
      isImageLoading: true
    })
    this.doFrameAni();
  },
  methods: {
    setPause() {
      if (this.data.isPause)
        return;

      this.setData({
        isPause: true,
      })
    },

    setPlay() {
      if (!this.data.isPause)
        return;
      this.setData({
        isPause: false,
      })
      this.doFrameAni();
    },

    doFrameAni() {
      // console.log(this.data.currentTimeIndex + "---")
      let _self = this;
      if (this.data.currentTimeIndex <= this.data.count - 1) {
        // 
        // console.log("do  loop")
        let tempToPosX = this.data.currentTimeIndex * this.data.width;
        let tempTimeIndex = this.data.currentTimeIndex + 1;
        this.setData({
          bgImagePosX: tempToPosX,
          currentTimeIndex: tempTimeIndex,
        })

        if (!this.data.isPause) {
          setTimeout(() => {
            _self.doFrameAni();
          }, this.data.frameTimerGap);
        }
      } else {
        if (this.data.playNumber > 0 && this.data.currentAniLoopIndex < this.data.playNumber - 1) {
          // 不够设定的播放次数  开始新一轮播放
          let currentIndex = this.data.currentAniLoopIndex + 1;
          this.setData({
            currentAniLoopIndex: currentIndex,
            currentTimeIndex: 1,
          })

          setTimeout(() => {
            _self.doFrameAni();
          }, this.data.frameTimerGap);
        } else if (this.data.playNumber > 0 && this.data.currentAniLoopIndex >= this.data.playNumber - 1) {
          // console.log("doaniend --- doaniend ")
          this.triggerEvent("end");
        } else {
          this.setData({
            currentTimeIndex: 1,
          })

          setTimeout(() => {
            _self.doFrameAni();
          }, this.data.frameTimerGap);
        }
      }
    },

    showImageLoading() {
      this.setData({
        isImageLoading: true
      })
    },

    onBoxLoadFinish() {
      this.triggerEvent("onBoxLoadFinish");
      this.setData({
        isImageLoading: false
      })
    },

    onBoxLoadError() {
      this.triggerEvent("onBoxLoadError");
      this.setData({
        isImageLoading: false
      })
    },

    onLoadingClick() {
      console.log("onLoadingClick")
    }
  },
});